<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text{
            color: red;
            font-size: 30px;
        }
        #desc{
            color: green;
            font-size: 40px;
        }
        .t1{
            color: orange;
        }
        .t2{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <h3>全局选择器：*</h3>
    <h3>元素选择器：标签名称</h3>
    <h3>类选择器:class属性名(.)</h3>
    <h3>ID选择器:id属性名(#)</h3>
    <h3>行内样式1000>ID选择器100>类选择器10>元素选择器1</h3>
    <p class="text" id="desc">我是p标签内容</p>
    <!-- 在CSS中，权重用数字衡量。
    元素选择器的权重为：1.
    class选择器的权重为：10.
    id选择器的权重为：100.
    内联样式的权重为：1000. 
    值越大代表越优先使用-->
    <p style="font-size: 50px;color: blue;" class="text" id="desc">p1</p>
    <!-- 这个是内联样式。 -->
     <p class="t1 t2">我是测试文本</p>
    <!-- 同级别选择器后覆盖前。 -->
</body>
</html>